import React, { useCallback, useEffect, useState } from 'react';
import { Drawer, Button, message, Upload } from 'antd';
import { ProForm, ProFormText, ProFormDigit, ProFormTextArea } from '@ant-design/pro-components';
import { UploadOutlined } from '@ant-design/icons';
import { useRequest } from '@umijs/max';
import { createProduct, updateProduct } from '@/services/ant-design-pro/product';
import { upload } from '@/services/ant-design-pro/api';
import ImageUpload from '@/components/ImageUpload';
const FormDrawer: React.FC<{
    visible: boolean;
    onClose: () => void;
    currentRow: any;
    onFinish: () => void;
    productId: string;
    type: string;
    attributeUrl: string;
    setImageUrl: (url: string | undefined) => void;
}> = ({ visible, onClose, currentRow, onFinish, form, productId, type, attributeUrl, setImageUrl }) => {
    const [fileList, setFileList] = useState<any[]>([]);

    useEffect(() => {
        if (attributeUrl) {
            setFileList([{ url: attributeUrl }]);
        }
    }, [attributeUrl]);

    const { run: submitProduct, loading } = useRequest(
        currentRow ? updateProduct : createProduct,
        {
            manual: true,
            onSuccess: () => {
                message.success('操作成功');
                onClose();
                onFinish();
            },
            onError: () => {
                message.error('操作失败');
            },
        }
    );

    const handleFinish = useCallback(
        async (values: any) => {
            await submitProduct({ ...values, productId, type });
        },
        [submitProduct, productId, type]
    );

    const handleUpload = async (file: File) => {
        const formData = new FormData();
        formData.append('file', file);

        try {
            const response = await upload(formData);
            setImageUrl(response.data[0]);
            setFileList([{ url: response.data[0] }]);
            form.setFieldsValue({ attributeUrl: response.data[0] });
        } catch (error) {
            message.error('上传图片失败，请重试');
        }
    };

    const imageUploadPropsMap = {
        '1': { maxWidth: 64, maxHeight: 64 },
        '2': { maxWidth: 1200, maxHeight: 400 },
        '3': { maxWidth: 1920, maxHeight: 700 },
        '4': { maxWidth: 136, maxHeight: 136 },
        '5': { maxWidth: 824, maxHeight: 548 },
        '7': { maxWidth: 370, maxHeight: 140 }
      };
    
      const getImageUploadProps = (activeKey: string) => {
        return imageUploadPropsMap[activeKey] || {};
      };

    return (
        <Drawer
            width={600}
            open={visible}
            onClose={onClose}
            title={currentRow ? 
                (type === '1' ? '编辑产品特点' : type === '2' ? ( productId === '1' ? '编辑API' : '编辑产品优势' ): type === '3' ? '编辑产品案例' : type === '4' ? '编辑服务能力' : '编辑应用场景') : 
                (type === '1' ? '新建产品特点' : type === '2' ?( productId === '1' ? '新建API' : '新建产品优势' ) : type === '3' ? '新建产品案例' : type === '4' ? '新建产品特点' : '新建应用场景')}
        >
            <ProForm
                form={form}
                initialValues={currentRow}
                onFinish={(params) => handleFinish({ ...currentRow, ...params })}
                layout="vertical"
                submitter={{
                    render: (props, dom) => {
                        return [
                            <Button
                                key="submit"
                                type="primary"
                                onClick={() => props.submit()}
                            >
                                提交
                            </Button>,
                        ];
                    }
                }}
            >
                {type === '1' && (
                    
                    <><ProFormText
                        name="attributeTitle"
                        label="标题"
                        placeholder="请输入属性标题"
                        rules={[{ required: true, message: '属性名称是必填项' }]} /><ProFormTextArea
                            name="attributeSubtitle"
                            label="描述"
                            placeholder="请输入描述" /></>
                    
                )}
                
                {type === '2'&& productId === '1' && (
                    
                    <><ProFormText
                        name="attributeTitle"
                        label="标题"
                        placeholder="请输入API标题"
                        rules={[{ required: true, message: '请输入API标题' }]} /></>
                    
                )}
                {type === '2'&& productId !== '1' && (
                    
                    <><ProFormText
                        name="attributeTitle"
                        label="标题"
                        placeholder="请输入API标题"
                        rules={[{ required: true, message: '请输入API标题' }]} />
                        
                        <ProFormTextArea
                        name="attributeSubtitle"
                        label="描述"
                        placeholder="请输入属性标题"
                        rules={[{ required: true, message: '请输入描述' }]}
                    />
                        </>
                    
                )}

                
                {  type === '3'  && (
                    <>
                     <ProFormText
                        name="attributeTitle"
                        label="标题"
                        placeholder="请输入属性标题"
                        rules={[{ required: true, message: '属性名称是必填项' }]}
                    />
                        <ProFormTextArea
                        name="attributeSubtitle"
                        label="描述"
                        placeholder="请输入属性标题"
                        rules={[{ required: true, message: '请输入描述' }]}
                    />
                        <ProFormText
                            label="导航标题"
                            name="typeTitle"
                            placeholder="请输入描述"
                        />
                       
                    </>
                )}

                {type === '4' && (
                     <><ProFormText
                     name="attributeTitle"
                     label="标题"
                     placeholder="请输入标题"
                     rules={[{ required: true, message: '标题是必填项' }]} /><ProFormTextArea
                         name="attributeSubtitle"
                         label="描述"
                         placeholder="请输入描述" /></>
                )}
                
                
                {type === '5' && (
                     <><ProFormText
                     name="attributeTitle"
                     label="标题"
                     placeholder="请输入标题"
                     rules={[{ required: true, message: '标题是必填项' }]} /></>
                )}

                {/* 图片上传项适用于所有类型 */}
                <ProFormDigit
                            name="sort"
                            label="排序"
                            placeholder="请输入排序"
                        />
                <ProForm.Item label="图片" name="attributeUrl">
                 <ImageUpload maxWidth={getImageUploadProps(type).maxWidth} maxHeight={getImageUploadProps(type).maxHeight} value={form.getFieldValue('attributeUrl')} onChange={(url) => setImageUrl(url)} />
                </ProForm.Item>
                <ProFormText label="图片alt" name="alt"></ProFormText>
            </ProForm>
        </Drawer>
    );
};

export default FormDrawer;
